<template>
<div>
    <el-button type="xingjian" @click="dialogVisible = true" icon="el-icon-plus" v-if="_SHOWBTN(showBetCode)">新建</el-button>

    <el-dialog title="添加举报相关法律" :visible.sync="dialogVisible" width="30%">
        <!--下拉框-->
        <!--下拉框-->
        <div class="box">
            <div class="choise-input">
                <span>分类：</span>
                <el-select v-model="value1" placeholder="请选择" @change="change">
                    <el-option label="全部" value="0"></el-option>
                    <el-option v-for="item in options" :key="item.id" :label="item.itemName" :value="item.itemValue"></el-option>
                </el-select>
                <span>详细分类：</span>
                <el-select v-model="value2" placeholder="请选择">
                    <el-option label="全部" value="0"></el-option>
                    <el-option v-for="item in options1" :key="item.id" :label="item.itemName" :value="item.itemValue"></el-option>
                </el-select>
                <el-button type="primary" @click="Getlist">查询</el-button>
                <el-button @click="Reset">重置</el-button>
            </div>
        </div>
        <!--穿梭框-->
        <el-transfer v-model="value" :data="data" :button-texts="['添加到左侧', '添加到右侧']">
            <el-button slot="left-footer" size="small" class="el-icon-arrow-left left" @click="getTenlawBefore" :disabled="isClick">上一页</el-button>
            <el-button class="right" slot="left-footer" size="small" @click="getTenlawNext" :disabled="isClick2">
                下一页
                <i class="el-icon-arrow-right el-icon--right"></i>
            </el-button>
        </el-transfer>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="BuilobSubmit">确 定</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
export default {
    data() {
        return {
            isClick: true,
            isClick2: false,
            dialogVisible: false,
            data: [],
            //目标列报春的数据
            value: [],
            options1: [{
                itemName: "全部",
                itemValue: "0",
            }],
            value1: "0",
            options: [],
            value2: "0",
            data1: [],
            data2: [],
            // 请求头
            paramsLaw: {
                pageNum: 1,
                pageSize: 10,
                sortCode1: "",
                sortCode2: "",
            },
            total: 0,
            num: 0,
        };
    },
    props: ["GetReportLaw", "showBetCode"],
    created() {
        // 分类
        this.Api.Fenlei({
            typeCode: "DJFG_SORT_LEVREL1",
        }).then((res) => {
            this.options = res.data;
            // console.log(this.options, 12121)
        });
        this.Api.Fenlei1({
            pItemValue: 1,
            typeCode: "DJFG_SORT_LEVREL2",
        }).then((res) => {
            this.data1 = res.data;
            // console.log(this.data1,11111);
        });
        this.Api.Fenlei2({
            pItemValue: 2,
            typeCode: "DJFG_SORT_LEVREL2",
        }).then((res) => {
            this.data2 = res.data;
            // console.log(this.data2,22222);
        });
        this.Api.Fenlei({
            typeCode: "DJFG_SORT_LEVREL2",
        }).then((res) => {
            this.data3 = res.data;
            // console.log(this.data3);
        });
        this.get();
    },
    methods: {
        // 获取所有的弹窗数据
        get() {
            this.Api.getReportLawList(this.paramsLaw).then((res) => {
                // console.log(res.data, "弹窗列表");
                this.data = res.data.records;
                this.data.forEach((item) => {
                    item.key = item.id;
                    item.label = item.title;
                });
                this.total = res.data.total;
                if (this.total < 10) {
                    this.isClick2 = true;
                }
                // console.log(typeof (this.total), "total")
            });
        },
        //上一页
        getTenlawBefore() {
            this.isClick2 = false;
            if (this.paramsLaw.pageNum > 0) {
                this.paramsLaw.pageNum--;
                this.get();
            }
            if (this.paramsLaw.pageNum === 1) {
                this.isClick = true;
            }
        },
        //下一页
        getTenlawNext() {
            // console.log(this.total / 10, "this.num/10")

            this.paramsLaw.pageNum++;
            if (this.paramsLaw.pageNum <= this.total / 10) {

                this.get();
            } else {
                this.isClick2 = true;
            }
            // console.log(this.paramsLaw, "this.paramsLaw")

            if (this.paramsLaw.pageNum > 1) {
                this.isClick = false;
            } else {
                this.isClick = true;
            }
        },
        //查询
        Getlist() {
            if (this.value1 === "0" && this.value2 === "0") {
                this.paramsLaw = {
                    pageNum: 1,
                    pageSize: 10,
                    sortCode1: "",
                    sortCode2: "",
                }
                this.get();
            } else if (this.value1 !== "0" && this.value2 === "0") {
                this.paramsLaw = {};
                this.paramsLaw = {
                    pageNum: 1,
                    pageSize: 10,
                    sortCode1: this.value1,
                    sortCode2: "",
                };
                // console.log(this.value1,this.value2,111111)
                this.Api.getReportLawList(this.paramsLaw).then((res) => {
                    // console.log(res, "查询结果");
                    this.data = [];
                    this.data = res.data.records;
                    this.data.forEach((item) => {
                        item.key = item.id;
                        item.label = item.title;
                    });
                    this.total = res.data.total;
                    if (this.total < 10) {
                        this.isClick2 = true;
                    }
                });
            } else {
                this.paramsLaw = {};
                this.paramsLaw = {
                    pageNum: 1,
                    pageSize: 10,
                    sortCode1: this.value1,
                    sortCode2: this.value2,
                };
                this.Api.getReportLawList(this.paramsLaw).then((res) => {
                    // console.log(res, "查询结果");
                    this.data = [];
                    this.data = res.data.records;
                    this.data.forEach((item) => {
                        item.key = item.id;
                        item.label = item.title;
                    });
                    this.total = res.data.total;
                    if (this.total <= 10) {
                        this.isClick2 = true;
                    }
                });
            }

        },
        Reset() {
            this.value1 = "0"
            this.value2 = "0"
            this.options1 = [{
                    itemName: "全部",
                    itemValue: "0",
                }],
                this.paramsLaw = {};
            this.paramsLaw = {
                pageNum: 1,
                pageSize: 10,
                sortCode1: "",
                sortCode2: "",
            };
            this.get();
        },
        // 分类下拉框事件

        change(e) {
            if (e == 0) {
                this.options1 = []
                this.value2 = "0"
            }
            if (e == 1) {
                // console.log(e);
                this.value2 = "0"
                this.options1 = []
                this.options1 = this.data1;
            } else if (e == 2) {
                this.value2 = "0"
                this.options1 = []
                this.options1 = this.data2;
                // console.log(this.options1, "this.options1");
            }
        },
        BuilobSubmit() {
            // console.log(this.value,11111)
            this.Api.BuilobSubmit({
                idList: this.value,
            }).then((res) => {
                if (res.code === "0") {
                    // console.log(res,1212121)
                    // this.get();
                    this.dialogVisible = false;
                    this.GetReportLaw();
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
/deep/.el-button--xingjian {
    width: 80px;
    height: 36px;
    background: rgba(61, 127, 255, 1);
    border-radius: 3px;
    font-size: 14px;
    color: rgba(255, 255, 255, 1);
    padding: 0;
}

/deep/.el-dialog {
    width: 710px;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid rgba(230, 233, 237, 1);
}

/deep/.el-dialog {
    width: 710px !important;

    .el-dialog__header {
        background: rgba(230, 233, 237, 1);
    }

    .el-dialog__body {
        .box {
            padding-bottom: 20px;
            border-bottom: 1px solid #dddddd;
            margin-bottom: 20px;
        }

        .el-transfer-panel {
            width: 280px;

            .el-transfer-panel__footer {
                display: flex;
                justify-content: space-between;

                .left {
                    width: 66px;
                    height: 100%;
                    border: 0;
                    background-color: white;
                    border-right: 1px solid #dddddd;
                    border-radius: 0;
                }

                .right {
                    margin-left: 146px;
                    width: 66px;
                    height: 100%;
                    border: 0;
                    background-color: white;
                    border-left: 1px solid #dddddd;
                    border-radius: 0;
                }
            }
        }

        .el-transfer__buttons {
            padding: 0;
            margin: 0 9px;

            .el-transfer__button {
                width: 90px;
                height: 32px;
                background: rgba(255, 255, 255, 1);
                border-radius: 4px;
                border: 1px solid rgba(221, 221, 221, 1);
                padding: 0;
                color: #333333;
                display: block;
                margin: 0 0 20px 0;
                font-size: 12px;

                span {
                    margin: 0;
                }
            }
        }
    }
}

/deep/.el-input__suffix {
    right: 150px;
}
</style>
